<template name="orderList">
	<view class="orderList">
		<block v-for="(item,index) in orderData" :key="index">
			<view class="orderItem" :data-oid="item.orderNo" :data-rid="item.refundId" @tap="toDetail" :data-status="item.status" >
				<view class="orderKey">
					<text class="orderId">订单号:{{item.orderNo}}</text>
					<text class="orderStatus">{{statusArr[item.status]}}</text>
				</view>
				<view class="placeOrderBox">
					<view class="placeUserBox" @tap.stop="toHuihua" data-url="conversationDetail" :data-imid="item.imid">
						<text class="iconfont icon-liaotian"></text>
						<text class="placeName">{{item.nickname}}</text>
					</view>
					<text class="paymentText">{{txtArr[item.status]}}:</text>
					<text class="paymentCount">￥{{(item.status==1 ||item.status==2 || item.status==3)?item.payAmount:item.price}}</text>
				</view>
				<view class="goodBox">
					<image :src="item.img?item.img:'../../static/good.png'" class="goodImg"></image>
					<view class="goodInfo">
						<text class="goodTitle">{{item.name}} </text>
						<text class="goodPrice">￥{{item.total}}</text>
					</view>
				</view>
				<view class="studentBox">
					<text class="studentTt">学员信息：</text>
					<text class="iconfont icon-renyuan"></text>
					<text class="studentName">{{item.member.name}}</text>
					<image src="../../static/tel.png"></image>
					<text class="studentTel">{{item.member.phone}}</text>
				</view>
				<view class="orderRemark refundReason" v-if="item.status==6||item.status==7" >
					<text class="remarkTitle reasonText">{{refundStatus[item.refundStatus]}}</text>
					<text class="remarkCnt refundCount">退款金额：￥{{item.refundAmount?item.refundAmount:''}}</text>
				</view>
				<view class="orderRemark" v-if="item.status==5" :data-oid="item.order_id" @tap.stop="addLabel">
					<text class="remarkTitle">分班标签：</text>
					<text class="remarkCnt">{{item.label?item.label:'点击添加分班标签'}}</text>
					<text class="iconfont icon-right"></text>
				</view>
				<view class="orderRemark" :data-oid="item.order_id" @tap.stop="remarke">
					<text class="remarkTitle">卖家备注：</text>
					<text class="remarkCnt">{{item.memo?item.memo:'点击添加备注'}}</text>
					<text class="iconfont icon-right"></text>
				</view>
				<view class="orderOptBox" >
					<button @tap.stop="reminder" v-if="item.status==1||item.status==2||item.status==3" :data-imid="item.imid" :data-idx="index">催 单</button>
					<button @tap.stop="toHuihua" v-if="item.status==4" :data-imid="item.imid" :data-idx="index">提醒体验</button>
					<button @tap.stop="toHuihua" v-if="item.status==5" :data-imid="item.imid" :data-idx="index">开课提醒</button>
					<button v-if="item.status==6">处理退款</button>
				</view>
			</view>
			
		</block>
		
	</view>
</template>

<script>
	import COMM from "@/common/common.js"
	import {mapState} from "vuex";
	export default {
		name: 'orderList', //组件名称
		// 传递参数
		props: {
			orderData: {
				type: Array,
				default: null
			}
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				selectShop:state=>state.shop.selectShop,
			})
			
		},
		// 组件参数
		data() {
			return {
				data1: 'value1',
				statusArr:['全部','待付预约金','待付尾款','待付全款','待体验','待开课','退款中','已退款','已关闭','已完成'],
				refundStatus:['','买家发起申请','买家撤销申请','卖家同意','卖家拒绝','买家修改申请','买家申请平台介入','卖家申请平台介入','平台同意退款','平台拒绝退款','已退款','已关闭'],
				txtArr:['已支付','待支付','待支付','待支付','已支付','已支付','已支付','已支付','已支付','已支付']
			}
		},
		// 组件方法
		methods: {
			// 备注订单
			remarke(e) {
				uni.$emit("remark",{
					orderId:e.currentTarget.dataset.oid
				})
			},
			addLabel(e) {
				uni.$emit("addLabel",{
					orderId:e.currentTarget.dataset.oid
				})
			},
			// 催单
			reminder(e){
				let _this=this;
				let toImid=e.currentTarget.dataset.imid
				let _idx=e.currentTarget.dataset.idx
				if(getApp().globalData.TIM_SDK_READY){
					COMM.timSendZdMsg(toImid,{
						data:'reminder',
						description:this.orderData[_idx].orderNo
					},_this).then(res=>{
						_this.toPage({
							url:'conversationDt',
							cvid:'C2C'+toImid,
							toImId:toImid
						})
					})
					
				}else{
					COMM.timLogin(this.userInfo.imid, _this).then(res => {
						uni.showLoading({
							title: '会话跳转中',
							mask: false
						});
						setTimeout(()=>{
							uni.hideLoading()
							COMM.timSendZdMsg(toImid,{
								data:'reminder',
								description:this.orderData[_idx].orderNo
							},_this).then(res=>{
								_this.toPage({
									url:'conversationDt',
									cvid:'C2C'+toImid,
									toImId:toImid
								})
							})
						},1000)
						
					})
				}
			},
			toDetail(e){
				let _orderStatus=e.currentTarget.dataset.status
				if(_orderStatus!='6' && _orderStatus!='7'){
					let _orderId=e.currentTarget.dataset.oid;
					this.toPage({
						url:'orderDetail',
						orderId:_orderId
					})
				}else{
					let _orderId=e.currentTarget.dataset.rid;
					this.toPage({
						url:'refundOrderDt',
						orderId:_orderId
					})
				}
				
			},
			// 跳转到会话页面
			toHuihua(e){
				let _this=this;
				let toImid=e.currentTarget.dataset.imid
				if(getApp().globalData.TIM_SDK_READY){
					this.toPage({
						url:'conversationDt',
						cvid:'C2C'+toImid,
						toImId:toImid
					})
				}else{
					COMM.timLogin(this.userInfo.imid, _this).then(res => {
						uni.showLoading({
							title: '会话跳转中',
							mask: false
						});
						setTimeout(()=>{
							uni.hideLoading()
							this.toPage({
								url:'conversationDt',
								cvid:'C2C'+toImid,
								toImId:toImid
							})
						},1000)
						
					})
				}
				
			}
		}
	}
</script>

<style lang="less">
	.orderList {
		padding: 11upx 17upx;
		display: flex;
		flex-direction: column;
	}

	.orderItem {
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 8upx;
		display: flex;
		flex-direction: column;
		padding: 20upx 0;
		margin-bottom: 50upx;
		.orderKey {
			display: flex;
			padding: 0 20upx;
			justify-content: space-between;

			.orderId {
				font-size: 26rpx;
				color: #737373;
			}

			.orderStatus {
				font-size: 26rpx;
				color: #ffb423;
			}
		}

		.placeOrderBox {
			display: flex;
			border-bottom: 1px solid #efefef;
			padding: 0 20upx 20upx 20upx;
			justify-content: space-between;
			margin-top: 24upx;
			align-items: center;

			.placeUserBox {
				display: flex;

				.iconfont {
					color: #ffbb37;
					margin-right: 15upx;
				}

				.placeName {
					font-size: 26rpx;
					color: #202932;
					margin-top: -5upx;
				}
			}

			.paymentText {
				font-size: 26rpx;
				flex: 1;
				text-align: right;
				color: #202932;
			}

			.paymentCount {
				font-size: 34rpx;
				font-weight: bold;
				color: #202932;
			}
		}

		.goodBox {
			display: flex;
			border-bottom: 1px solid #efefef;
			padding: 15upx 20upx;

			image {
				width: 166upx;
				height: 166upx;
				flex-shrink: 0;
				border-radius: 10upx;
				margin-right: 30upx;
			}

			.goodInfo {
				display: flex;
				flex-direction: column;
				padding: 12upx 0;

				.goodTitle {
					font-size: 28rpx;
					color: #202932;
					margin-bottom: 8upx;
				}

				.goodPrice {
					font-size: 32rpx;
					font-weight: bold;
					color: #202932;
				}
			}

		}

		.studentBox {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #efefef;
			padding: 15upx 20upx;

			.studentTt {
				font-size: 28rpx;
				color: #202932;
			}

			.iconfont {
				font-size: 40upx;
				color: #babfc3;
				margin-right: 15upx;
			}

			.studentName {
				font-size: 28rpx;
				color: #202932;
				margin-right: 50upx;
			}

			image {
				width: 40upx;
				height: 40upx;
				margin-right: 15upx;
			}

			.studentTel {
				font-size: 28rpx;
				color: #202932;
			}
		}

		.orderRemark {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #efefef;
			padding: 24upx 20upx;
			
			.remarkTitle {
				font-size: 26rpx;
				color: #202932;
			}

			.remarkCnt {
				font-size: 26rpx;
				color: #939393;
				flex-grow: 1;
			}
			.iconfont{
				color: #939393;
				font-size: 24upx;
			}
		}
		.refundReason{
			justify-content: space-between;
			.reasonText{
				color: #FF0000;
			}
			.refundCount{
				color: #FF0000;
				text-align: right;
			}
		}
		.orderOptBox{
			display: flex;
			width: 100%;
			justify-content: flex-end;
			padding: 20upx 20upx 0 20upx;
			button{
				height: 62upx;
				border: solid 3rpx #ffb423;
				border-radius: 31upx;
				background-color: #FFFFFF;
				font-size: 32rpx;
					color: #ffa71d;
					line-height: 56upx;
					padding: 0 50upx;
					margin: 0;
			}
			button:after{
				border: none;
			}
		}
	}
</style>
